<template>
    <div class="a">
        角色名称<input type="text" placeholder="请输入角色名称">
        权限字符<input type="text" placeholder="请输入权限字符">
        状态<el-select placeholder="角色状态" style="width: 200px; height: 30px; margin-left: 5px;">
            <el-option label="正常" value="1"></el-option>
            <el-option label="禁用" value="2"></el-option>
        </el-select>
        创建时间
        <el-date-picker type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
            value-format="yyyy-MM-dd" style="width: 200px; height: 30px; margin-left: 5px;">
        </el-date-picker>
        <el-button type="primary">搜索</el-button>
    </div>
    <div class="b">
        <!-- 新增，删除，修改按钮 -->
        <el-button type="primary" plain @click="toInsert">新增</el-button>
        <el-button type="success" plain @click="toUpdate">修改</el-button>
        <el-button type="danger" plain>删除</el-button>
    </div>
    <!-- 表格 -->
    <div class="c">
        <el-table :data="tableData" style="width: 100%">
            <el-table-column type="selection" width="55" />
            <el-table-column label="角色编号" width="200">
                <template #default="scope">{{ scope.row.role_id }}</template>
            </el-table-column>
            <el-table-column property="rolename" label="角色名称" width="200" />
            <el-table-column property="role_code" label="权限字符" width="200" />
            <el-table-column property="status" label="状态" width="200">
                <template #default="scope">
                    <el-switch v-model="scope.row.status"></el-switch>
                </template>
            </el-table-column>
            <!-- 创建时间 -->
            <el-table-column property="createtime" label="创建时间" />
            <el-table-column label="操作" width="240">
                <template #default="scope">
                    <el-button type="primary" size="small" @click="toUpdate" :row="scope.row">编辑</el-button>
                    <el-button type="danger" size="small" @click="toDelete">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <!-- 分页 -->
    <div class="d">
        <div class="demo-pagination-block">
            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                :page-sizes="[10, 20, 30, 50]" :size="size" :disabled="disabled" :background="background"
                layout="total, sizes, prev, pager, next, jumper" :total="2" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </div>
    </div>
    <!-- 新增弹窗 -->
     <el-dialog title="新增" v-model="isvisible" width="600px" @click="toInsert">
        <Insert></Insert>
    </el-dialog>
    <el-dialog title="修改" v-model="isvisibleUpdate" width="600px" @click="toUpdate">
        <Update :data="data"></Update>
    </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

import type { ComponentSize } from 'element-plus'
import router from '@/router'
import { ElMessage } from 'element-plus'
import Insert from './insert.vue'
import Update from './update.vue'

let data = ref({})
// 设置修改按钮是否可用
let isDisabled = ref(true)
// 显示新增弹窗（默认不显示）
let isvisible = ref(false)

// 显示修改弹窗（默认不显示）
let isvisibleUpdate = ref(false)
let toInsert = () => {
    isvisible.value = true   
}

let toUpdate = () => {
    isvisibleUpdate.value = true
}
// 删除
let toDelete = (id) => {
     
}

const currentPage = ref(4)
const pageSize = ref(100)
const size = ref<ComponentSize>('default')
const background = ref(true)
const disabled = ref(false)

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}

let tableData = [

    {
        role_id: '1',
        rolename: '王小虎',
        role_code: 'admin',

        createtime: '2021-05-02 10:00:00'
    },
    {
        role_id: '2',
        rolename: '王小虎',
        role_code: 'admin',

        createtime: '2021-05-02 10:00:00'
    },
    {
        role_id: '3',
        rolename: '王小虎',
        role_code: 'admin',

        createtime: '2021-05-02 10:00:00'
    }
]


</script>

<style scoped>
.top-breadcrumb {
    padding: 10px 20px;
    margin: auto 0;
    size: 20px;
    height: 40px;
    /* 下边框线 */
    border-bottom: 1px solid #ddd;
}

.top-breadcrumb-right {
    float: right;
}

input {
    width: 200px;
    margin: 0 10px;
    height: 30px;
    border: 1px solid #ccc;
}

.a {
    margin-left: 20px;
    margin-top: 10px;
    font-size: 14px;
}

.a input {
    width: 200px;
    height: 30px;
    border: 1px solid #ccc;
    margin: 0 10px;

}

.a button {
    margin-left: 20px;
}

.b {
    margin-left: 20px;
    margin-top: 20px;
}

.c {
    margin-left: 20px;
    margin-top: 20px;
}
.d{
    /* 放到表格右下角 */
    position: absolute;
    right: 0;
    margin-top: 20px;
}

/* 鼠标悬浮到表格改变背景色 */
table tr:hover {
    background-color: #ccc;
}
/* 分页样式 */
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}

</style>
